<!-- 看板快捷菜单设置 -->
<template>

	<view class="shortcut" :style="{paddingTop:$u.addUnit(144 + $u.sys().statusBarHeight,'px'),}">

		<!-- 导航栏 -->
		<u-navbar :fixed="false" title="快捷发起" :autoBack="false" :safeAreaInsetTop="false" style="width: 100%;">
			<view class="u-nav-slot" slot="left">
				<u-button text="应用"
					customStyle="background-color:#ECFDFE;color:#409EFF;width:50px;height:32px;border-radius:16px;font-weight:600;border:1px solid #B3E5FC;"
					@click="saveShortcut()"></u-button>
			</view>
			<view class="u-nav-slot" slot="right">
				<view
					style="display:flex;justify-content: center;align-items:center;background-color:#FFFFFF;width:32px;height:32px;border-radius:16px;border:1px solid #FFA3A5;"
					@click="quitSetting()">
					<u-icon name="close" color="#FF4D4F" size="18"></u-icon>
				</view>
			</view>
		</u-navbar>

		<!-- 菜单设置 -->
		<view class="shortcut-content">
			<view class="left_wrap">
				<view class="leftItem" :class="selectedTreeTypeIndex==index ? 'on' : ''"
					v-for="(treeType,index) in module.treeTypes" @click="changeTreeType(treeType,index)">
					<view class="leftItemTag" :class="selectedTreeTypeIndex==index ? 'on' : ''"></view>
					<text>{{treeType.treeTypeName}}</text>
					<u-badge style="margin-top:-8px;" :value="treeType.pages.filter(item=>item.IsChecked).length"
						max="9" showZero type="error"></u-badge>
				</view>
			</view>
			<view class="right_wrap">
				<u-cell v-for="(page,index) in selectedTreeType.pages" @click="toggleShortcut(page)">
					<view style="display: flex;justify-content: flex-start;align-items: center;" slot="title">
						<uni-icons v-if="page.CustomFont && page.PIC_PH" :fontFamily="page.CustomFont" :size="22"
							:color="page.AP_Colour">{{ $utils.toUniCode(page.PIC_PH) }}</uni-icons>
						<uni-icons v-else fontFamily="CustomFontPlatform" :size="22"
							color="#3ace4b">{{ $utils.toUniCode('&#xe62c;') }}</uni-icons>
						<text class="rightItem">{{page.APFunName}}</text>
					</view>
					<view slot="right-icon">
						<checkbox :checked="page.IsChecked"
							:disabled="page.IsShortcut && page.KanBanID==shortcutSetting.currBoardID"
							activeBackgroundColor="#51d0d0" activeBorderColor="#51d0d0">
						</checkbox>
					</view>
				</u-cell>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				// #ifdef APP-PLUS
				eventChannel: null,
				// #endif
				shortcutSetting: {},
				maxMenus: 16, // 看板最大快捷菜单数量
				currNums: 0, //	当前设置菜单数量
				module: {}, // 当前APP类型
				selectedTreeTypeIndex: 0, //	当前选中菜单功能分类下标
				selectedTreeType: {} // 当前选中菜单功能分类
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
		},
		mounted() {
			let that = this;
			that.shortcutSetting = that.$store.state.shortcutSetting;
			// console.log(shortcutSetting);
			that.module = that.shortcutSetting.currModule;
			that.selectedTreeType = that.module.treeTypes[that.selectedTreeTypeIndex];
			that.currNums = that.shortcutSetting.currShortcut.length;
			that.initTree(that.shortcutSetting.currShortcut);
		},
		methods: {

			// 初始化选中状态
			initTree(menus) {
				let that = this;
				console.log(menus);
				// 更新非默认已有菜单为选中
				menus.forEach(menu => {
					let treeType = that.module.treeTypes.find(tree => tree.treeType == menu.TreeType);
					let page = treeType.pages.find(page => page.APPFunID == menu.APPFunID);
					page.IsChecked = true;
				})

				// 更新选中未保存为未选中
				that.module.treeTypes.forEach(tree => {
					tree.pages.forEach(item => {
						let flag = menus.some(menu => menu.APPFunID == item.APPFunID);
						if (!flag && !item.IsShortcut) {
							item.IsChecked = false;
						}
						// 更新非当前看板默认快捷菜单为未选中
						if (!flag && item.IsShortcut && item.KanBanID != that.shortcutSetting
							.currBoardID) {
							item.IsChecked = false;
						}
					})
				})
			},

			// 快捷菜单-保存
			saveShortcut() {
				let that = this;
				let defaultCheckedPages = [];
				let otherCheckedPages = [];

				that.module.treeTypes.forEach(tree => {
					tree.pages.forEach(page => {
						// 已选中非默认菜单
						if (!page.IsShortcut && page.IsChecked) {
							otherCheckedPages.push(page);
						}
						// 已选中其他看板默认菜单
						if (page.IsShortcut && page.KanBanID != that.shortcutSetting.currBoardID && page
							.IsChecked) {
							otherCheckedPages.push(page);
						}
						// 已选中当前看板默认菜单
						if (page.IsShortcut && page.KanBanID == that.shortcutSetting.currBoardID && page
							.IsChecked) {
							defaultCheckedPages.push(page);
						}
					})
				})

				let shortcuts = [...defaultCheckedPages, ...otherCheckedPages];
				console.log(shortcuts.length);
				that.persistShortcut(shortcuts);
			},

			// 快捷菜单-选中/反选
			toggleShortcut(menu) {
				let that = this;
				console.log(that.currNums);

				if ((!menu.IsShortcut && menu.KanBanID == that.shortcutSetting.currBoardID) || (menu.KanBanID != that
						.shortcutSetting.currBoardID)) {
					if (menu.IsChecked) {
						menu.IsChecked = false;
						that.currNums -= 1;
					} else {
						if (that.currNums < 16) {
							menu.IsChecked = true;
							that.currNums += 1;
						} else {
							uni.showToast({
								title: '菜单数已达上限!',
							})
							return false;
						}
					}
					this.$forceUpdate();
				}
			},

			// 菜单功能分类-切换
			changeTreeType(treeType, index) {
				let that = this;
				that.selectedTreeType = treeType;
				that.selectedTreeTypeIndex = index;
			},

			// 快捷菜单-缓存
			persistShortcut(shortcuts) {
				let that = this;

				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcuts' + that.shortcutSetting.currBoardID,
					data: shortcuts,
					StorageName: 'shortcuts' + that.shortcutSetting.currBoardID,
					StorageData: JSON.stringify(shortcuts)
				});

				uni.showToast({
					title: '设置成功!',
					icon: 'success',
					success() {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success() {
									that.eventChannel.emit('refreshShortcut');
								}
							})
						}, 800)
					}
				})
			},

			// 快捷菜单设置-退出
			quitSetting() {
				uni.navigateBack()
			}

		},

		onLoad() {

		},

		onUnload() {

		}
	}
</script>


<style lang="scss">
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5px;

	page {
		background: transparent;
	}

	// 快捷菜单弹窗
	.shortcut {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		overflow: hidden;

		&-content {
			display: flex;
			flex: 1;
			background-color: #FFFFFF;

			.left_wrap {
				display: flex;
				flex-direction: column;
				background-color: #F7F8FA;
				width: 25%;
				height: calc(100vh - 144px - 44px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
				overflow-y: auto;

				.leftItem {
					display: flex;
					align-items: center;
					height: 44px;
					font-size: 15px;
					padding: $v-padding 0;

					.leftItemTag {
						width: 3px;
						height: 20px;
						margin-right: 5px;
						background-color: transparent;
					}

					.leftItemTag.on {
						background-color: $main-background-color;
						border-color: #FFFFFF;
						color: #ffffff;
					}
				}

				.leftItem.on {
					background-color: #FFFFFF;
				}

			}

			.right_wrap {
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				width: 75%;
				height: calc(100vh - 144px - 44px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
				overflow-y: auto;

				.rightItem {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 14px;
					margin-left: $h-padding;
				}

			}
		}

	}
</style>